<template lang="pug">
  //- !getBottomMenuLenth && getThemeId == 2 && !showTouch
  .scene(
    :class="{'no-tab': !showSceneGroup, 'animated bounceInUp': showScene}",
    :style="{bottom: '0'}",
    v-show="showScene",
    @dblclick="handleToggleScene")
    .group-scenic(v-if="getSceneList") 周边景点

    Scroll.scene-wrap(v-if="getSceneList", :data="getSceneList", :scrollX="true", ref="scrollSceneWrap")
      ul.scene-list(ref="sceneListWrap")
        //- :content="item.dec",
          :disabled="item.dec ? false : true",
          effect="dark",
          placement="top"
        el-tooltip(
          v-for="(item, index) in getSceneList"
          :disabled="true"
          :key="index")
          //- :style="[getComsumerStyle, sceneIndex == index ? getBdColorStyle : '']",
            :class="['item', {'active': sceneIndex == index && !item.isLock}]",
          li.scene-list-item(
            ref="sceneItem",
            @click="changeScene(item)"
            @mouseover="checkScrollText(index)",
            @mouseout="cleanScrollText(index)")
            //- i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
            .lock(v-if="item.isLock")
              i.iconfont &#xe6f0;
            .img-box
              img(:style="getComsumerStyle", :src="item.full_pic_thumb_url", alt="")
            .text.omit(:style="sceneIndex == index ? getColorStyle : ''")
              p(ref='text') {{item.scene_name}}
              .dis {{item.distance}}m

</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  },
  data() {
    return {
      showTouch: $globalconfig.MODULES.TOUCH_BUTTON,
    }
  },
  methods: {
    // 切换场景
    changeScene(item) {
      if (item.fk_scene_id) {
        this.$krp.switchEffect(item.fk_scene_id)
      }
    },
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/scene.styl'

.theme-pc
  .scene
    text-align: center

    .scene-wrap
      .scene-list
        .scene-list-item
          position: relative
          border-radius: 6px

          .text
            position: absolute
            background-color: rgba($black, 0.4)
            height: 20px
            line-height: 20px
            box-sizing: border-box

    .scene-group
      $height = 34px
      height: $height

      .scene-group-item
        height: $height

        .label
          font-size: 12px
          height: $height - 4
          line-height: $height - 4

    // 无分组
    .no-tab
      .scene-group
        height: auto

// I模板独有样式
.theme-pcapp-i
  .scene
    background rgba(0,0,0,0)
    .group-scenic
      height 30px
      color #fff
      font-size 14px
      text-align left
      padding-left 10px
    .scene-wrap
      height: 80px
      text-align: left

      .scene-list
        height: 80px

        .scene-list-item
          position: relative
          width: 150px
          height: 80px
          border-radius 0
          .text
            height 40px
            .dis
              bottom 0
              width 100%
              position absolute
              text-align center
              color #999
          .img-box
            img
              border-radius 0

          & > .lock
            line-height: 80px

    .scene-group
      margin-bottom 10px
    .scene-group-item
      .label
        width: 80px
        background-color rgba(0,0,0,0)

</style>
